<template>
  <div class="ktxtt">
    <div class="top-nav"></div>
    <div class="ktxtt-content">
      <div id="ktxtt-topology"></div>
    </div>
  </div>
</template>
<script>
import { Topology } from "@topology/core";
import { passDeptIdQueryDrawingInfo } from "../../api/base9534.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      queryParmas: {
        stationCode: sessionStorage.getItem("stationCode"),
      },
    };
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      this.loading = true;
      this.dataJson = {};
      let resData = await passDeptIdQueryDrawingInfo(this.queryParmas);
      this.dataJson = resData.data[0].pdata;
      const center12 = new Topology("ktxtt-topology");

      if (Object.keys(resData.data[0].pdata).length) {
        center12.open(this.dataJson);
        center12.fitView(12);
        this.loading = false;

        center12.on("s1", (e) => {
          console.log(e);
        });
      } else {
        this.$message.success("此车站暂无图纸数据！");
        setTimeout(() => {
          this.loading = false;
        }, 100);
      }
    },
  },
  computed: {
    ...mapState(["stationCode"]),
  },
  watch: {
    stationCode(newVal, oldVal) {
      if (newVal != oldVal) {
        this.loading = true;
        this.queryParmas.stationCode = newVal;
        this.initData();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.ktxtt {
  width: 100%;
  height: 100%;

  .top-nav {
    width: 100%;
    height: 0.41rem;
  }
  .ktxtt-content {
    width: 100%;
    height: calc(100% - 0.41rem);
    #ktxtt-topology {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
      // background-color: #73972a;
    }
  }
}
</style>
